<template>
  <el-dialog
  :title="'编辑' + getTitlte"
  :visible.sync="editOptiondialogVisible"
  width="50%"
  @close="handleClose">
  
  <!-- 表单区域 -->
    <el-form :model="editformOptionData" :rules="editOptionFormrules" 
    ref="editorOptionFormRef" label-width="100px">
      <el-form-item :label="getTitlte" prop="attr_name">
        <el-input v-model="editformOptionData.attr_name"></el-input>
      </el-form-item>
    </el-form>

  <!-- 按钮区域 -->
  <span slot="footer">
    <el-button @click="editOptiondialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="checkFun">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
// 网络
import { getInfoById, putEditGoodOption } from '@/network/goodOptionRequest';

export default {
  data() {
    return {
      editOptiondialogVisible: false, // dialog开关
      editformOptionData: { // 双向数据绑定
        attr_name: ''
      },
      editOptionFormrules: { // 表单验证规则
        attr_name: [{ required: true, message: '请输入参数名', trigger: 'blur' }]
      }
    }
  },
  props: {
    activeName: String
  },
  computed: {
    getTitlte() { // 获取标题
      return this.activeName === 'many' ? '动态参数' : '静态参数';
    }
  },
  methods: {
    handleClose() {
      this.$refs['editorOptionFormRef'].resetFields(); // 清理表单验证
    },
    checkFun() {
      this.$refs['editorOptionFormRef'].validate(val => {
        if (!val) {
          return this.$message.error('请将表单按照提示填写完整');
        }
        this.editGoodOptionRequest();
      })
    },
    editDialogopen(info) {
      this.editformOptionData = info;
      this.getItemById(); // 获取当前项的所有信息
      this.editOptiondialogVisible = true;
    },
    async getItemById() { // 根据id获取对应信息
      const id = this.editformOptionData.cat_id; // 分类id
      const attrId = this.editformOptionData.attr_id; // 属性id

      // 网络请求
      const {meta, data} = await getInfoById(id, attrId, { attr_sel: this.activeName })
      if (meta.status !== 200) {
        console.log(this.meta);
        return this.$message.error(meta.msg);
      }
      // console.log(data);
      return this.editformOptionData = data;

    },
    async editGoodOptionRequest() { // 提交表单网络请求
      const id = this.editformOptionData.cat_id; // 分类id
      const attrId = this.editformOptionData.attr_id; // 属性id
      // console.log(this.activeName);
      // 网络请求
      const {meta} = await putEditGoodOption(id, attrId, {
        attr_name: this.editformOptionData.attr_name,
        attr_sel: this.activeName
      }); 
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.$bus.$emit('getGoodOptionDataListRequest');
      this.$message.success(meta.msg);
      return this.editOptiondialogVisible = false;
    }
  },
  created() {
    this.$bus.$on('editDialogopen', info => this.editDialogopen(info));
  },
  destroyed() {
    this.$bus.$off('editDialogopen');
  }

}
</script>

<style lang="scss" scoped>

</style>